class Enlarge {
    constructor(box) {
        this.box = document.querySelector(box)
        this.mask = this.box.querySelector(".show .mask")
        this.showImg = this.box.querySelector(".show img")
        this.enlarge = this.box.querySelector(".enlarge")
        this.bigImg = this.enlarge.firstElementChild
        this.list = this.box.querySelector(".list")
        this.maskWidht = this.mask.clientWidth
        this.maskHeight = this.mask.clientHeight
        this.showImgWidht = this.showImg.clientWidth
        this.showImgHeight = this.showImg.clientHeight
        this.bigImgWidth = this.bigImg.clientWidth
        this.bigImgHeight = this.bigImg.clientHeight
    }
    setScale() {
        this.enlargeWidht = this.maskWidht * this.bigImgWidth / this.showImgWidht
        this.enlargeHeight = this.maskHeight * this.bigImgHeight / this.showImgHeight
        this.enlarge.style.width = this.enlargeWidht + 'px'
        this.enlarge.style.height = this.enlargeHeight + "px"
    }
    changeImg() {
        this.list.addEventListener("click", (e) => {
            e = e || window.event;
            if (e.target.nodeName === "IMG") {
                for (let i = 0; i < this.list.children.length; i++) {
                    this.list.children[i].classList.remove("active")
                }
                let index = +e.target.dataset.index;
                this.list.children[index].classList.add("active")
                this.showImg.src = e.target.dataset.m
                this.bigImg.src = e.target.dataset.b
            }
        })
    }
    move() {
        this.showImg.addEventListener("mousemove", (e) => {
            e = e || window.event;
            let x = e.offsetX;
            let y = e.offsetY
            x = x - this.maskWidht / 2
            y = y - this.maskHeight / 2
            if (x < 0) x = 0;
            if (y < 0) y = 0;
            if (x > this.showImgWidht - this.maskWidht) x = this.showImgWidht - this.maskWidht
            if (y > this.showImgHeight - this.maskHeight) y = this.showImgHeight - this.maskHeight
            this.mask.style.top = y + "px"
            this.mask.style.left = x + 'px'
            let enlargeMoveX = x * this.enlargeWidht / this.maskWidht
            let enlargeMoveY = y * this.enlargeHeight / this.maskHeight
            this.bigImg.style.left = -enlargeMoveX + "px"
            this.bigImg.style.top = -enlargeMoveY + 'px'
        })
    }
    init() {
        this.setScale();
        this.changeImg();
        this.move();
    }
}